/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: liuzicheng
 * @Date: 2025-01-22 13:48:44
 * @LastEditors: liuzicheng
 * @LastEditTime: 2025-03-05 14:24:04
 */
import "@/App.less";
import { ConfigProvider, theme } from "antd";
import { createContext, useEffect, useMemo, useState } from "react";
import RouterTable from "./router";
import { inject, observer } from "mobx-react";
// import { IUserStore } from "./store/userStore"
import { AliveScope } from "react-activation";
import { useNavigate } from "react-router";
export const ThemeContext = createContext(null);
function App() {
  // 使用useState来保存当前主题是否为暗色
  const [isDark, setIsDark] = useState(sessionStorage.getItem("isDark") === "true");

  const createLink = (url, id) => {
    const link = document.createElement("link");
    link.id = id;
    link.rel = "stylesheet";
    link.href = url;
    document.head.appendChild(link);
  };
  useMemo(async () => {
    const curVersion = window.navigator.userAgent.split("Chrome/")[1].split(".")[0];
    // 兼容360
    if (Number(curVersion) < 88) {
      if (isDark) {
        createLink("/antd.dark.min.css", "darkModeCss");
      } else {
        if (!document.getElementById("modeCss")) {
          createLink("/antd.css", "modeCss");
        }
        const darkModeCss = document.getElementById("darkModeCss");
        if (darkModeCss) {
          darkModeCss.remove();
        }
      }
    }
  }, [isDark]);
  const navigate = useNavigate();
  const [reload, setReload] = useState(false);
  useEffect(() => {
    if (window.location.pathname === "/") {
      navigate("/welcome");
      setReload(true);
    }
  }, []);

  return (
    <ConfigProvider
      theme={{
        // 1. 单独使用暗色算法
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: {
          colorPrimary: "#4096ff"
        }
        // 2. 组合使用暗色算法与紧凑算法
        // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
      }}
    >
      <ThemeContext.Provider value={{ setIsDark }}>
        <AliveScope>
          <RouterTable key={reload.toString()} />
        </AliveScope>
      </ThemeContext.Provider>
    </ConfigProvider>
  );
}

export default inject("userStore")(observer(App));
